<template>
	<div id="mask" @click="close" v-if="formVisible">
		<div id="priceChart_"  @click.stop="">
			<div class="title my-flex-between">
				<span>历史价格走势</span>
				<img class="hover" @click="close" src="../../assets/priceType/del.png" alt="" />
			</div>
			<div class="lowest my-flex-right">
				<span>历史最低价：<span class="color-red">
					<template v-if="priceType && (priceType=='brent'||priceType=='wti')">$</template>
					<template v-else>¥</template>
					
					{{lowest}}
				</span></span>
			</div>

			<div class="price my-flex-left">
				<li @click="changeType(1)" :class="[{'active':type==1}]" class="my_flex_center hover">一周内</li>
				<li @click="changeType(2)" :class="[{'active':type==2}]" class="my_flex_center hover">一个月</li>
				<li @click="changeType(3)" :class="[{'active':type==3}]" class="my_flex_center hover">三个月</li>
			</div>
			<div id="myChart"></div>

		</div>
	</div>

</template>

<script>
	import service from '@/js/services/price/priceType.js';
	export default {
		props: {
			productName: '',
		},
		data() {
			return {
				formVisible: false,
				type: 1,
				xAxis: [],
				yAxis: [],
				lowest: null,
				searchCondition: {},
				priceType:null
			}
		},
		mounted() {

		},
		watch: {
			formVisible(newVal) {
				if(newVal) {
					setTimeout(() => {
						//						debugger
						this.productPrice();
						console.log(this)
					}, 0)
				}
			}
		},
		methods: {
			...service,
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'));
				let option_ = {
					tooltip: {
						trigger: 'axis',
						//				         position: [10, 10]
					},
					grid: {
						top: 10,
						bottom: 30,
						left: 50,
						right: 40
					},
					xAxis: {
						type: 'category',
						data: this.xAxis
					},
					yAxis: {
						type: 'value',
						min: this.lowest,
						//				        max:1400
					},
					series: [{
						data: this.yAxis,
						type: 'line',
						smooth: true,
						markLine: {
							data: [{
								name: '平均线',
								// 支持 'average', 'min', 'max'
								type: 'average'
							}]
						}
					}]
				};
				// 绘制图表
				myChart.setOption(option_);
			},
			show(item) {
				console.log(item)
				this.formVisible = true;
				if(this.$store.state.searchCondition) {
					this.searchCondition = this.$store.state.searchCondition;
				} else {
					this.searchCondition = this.tool.cloneObj(service.searchCondition);
				}
				console.log(this.searchCondition)
				if(item.products&&item.products.length>0){
					this.priceType = item.products[0].priceType;
				}
				
				
				
			},
			close() {
				this.formVisible = false;
			},
			confirm() {
				this.close();
			},
			changeType(type) {
				this.type = type;
				this.productPrice(this);
			}
		}
	}
</script>

<style lang="less">
	@import '../../less/base/base.less';
	#mask{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 11;
	}
	#priceChart_ {
		position: fixed;
		width: 540px;
		height: 350px;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		box-shadow: 0 12px 24px 0 rgba(7, 17, 27, 0.2);
		border: 1px solid @base-color;
		background-color: #fff;
		z-index: 1111;
		.title {
			width: 100%;
			height: 48px;
			line-height: 48px;
			border-bottom: 1px solid @color-border;
			padding: 0 19px;
			img {
				width: 16px;
			}
			span {
				font-size: 16px;
			}
		}
		.lowest {
			margin-top: 20px;
			font-size: 14px;
			padding: 0 19px;
		}
		.price {
			padding: 0 19px;
			font-size: 14px;
			li {
				width: 60px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: @color-border;
				margin-right: 20px;
				&.active {
					color: @base-color;
					background-color: #feebeb;
				}
			}
		}
		#myChart {
			margin-top: 16px;
			width: 100%;
			height: 200px;
		}
	}
</style>